import React, { Component, PropTypes } from 'react';
import { Tooltip, Select, Popover } from 'antd';
import BIService
  from 'containers/enterprise-manage/person-manage/person-detail/person-detail-components/basic-info.service';
import PDService from 'containers/enterprise-manage/person-manage/person-detail/person-detail.service';
import LoginService from 'containers/login/login.service';
import 'styles/login/components/input-mobile-prefix.scss';
import { connect } from 'react-redux';
import { Form } from 'antd/lib/index';

const {Option} = Select;

let mobilePrefixList = [];
class InputMobilePrefix extends Component {
  constructor (props) {
    super(props);
    this.state = {
      prefixList: mobilePrefixList,
      isActiveStatus: false,
      isOpened: false
    };
    this.useLanguageCode= ''
  }
  
  componentDidMount () {
    this.getMobilePrefixList(this.props);
  }
  
  componentWillReceiveProps(nextProps){
    if( this.useLanguageCode !== nextProps.language.code){
      this.getMobilePrefixList(nextProps);
    }
  }
  
  getMobilePrefixList (props) {
    let {language}= props
    this.useLanguageCode= language.code
    PDService.getMobilevalidateList()
      .then((res) => {
        mobilePrefixList = res.data;
        this.setState({
          prefixList: mobilePrefixList
        });
      });
  }
  
  setOption = (item, index) => {
    return <Option value={item.shortName + '$$' + item.countryCode} key={item.countryCode}>
      {item.countryName + '(' + item.countryCode + ')'}
    </Option>;
  }
  
  onSelectorFocus = (e) => {
    this.setState({
      isOpened: true
    })
  };
  onSelectorSearch = (e) => {
    console.log('onSelectorSearch');
    this.setState({
      isActiveStatus: this.state.isOpened
    })
  };
  onSelectorBlur = (e) => {
    console.log('onSelectorBlur');
    this.setState({
      isActiveStatus: false,
      isOpened: false
    })
    this.refs['selector'].blur();
    let value= this.props.value;
    if(value.indexOf('$$') != -1){
      localStorage.setItem('hly.mobile.areacode', this.props.value);
    }
  }
  
  onSelectorChange = (e) => {
    this.props.onChange && this.props.onChange(e);
    this.onSelectorBlur()
  }
  
  render () {
    let {prefixList, isActiveStatus, isOpened} = this.state;
    let props = Object.assign({}, this.props, {
      ref: 'selector',
      className: `${isActiveStatus? '': 'display-areacode-transparent'}`,
      width: this.props.theme === 'default'? 60: 80,
      optionFilterProp: 'children',
      dropdownMatchSelectWidth: false,
      dropdownClassName: `mobile-prefix-selector-dropdown `,
      onFocus: this.onSelectorFocus,
      onBlur: this.onSelectorBlur,
      onChange: this.onSelectorChange,
      onSearch: this.onSelectorSearch
    });
    let value= this.props.value
    if(value === 86){
      value = 'CN$$86'
    }
    return <span className={`input-mobile-prefix-wrapper theme-${this.props.theme || 'default'}`}>
      {!isActiveStatus && <span className={`display-areacode ${isOpened? 'half-transparent': ''}`}>+{LoginService.getCountryCode(value)}</span>}
      {BIService.renderMobilePrefix(prefixList, {...props}, this.setOption)}
    </span>;
  }
}

InputMobilePrefix.propTypes={
  theme:  PropTypes.oneOf(['default', 'solid']),
}
InputMobilePrefix.defaultProps = {
  theme: 'default'
}

function mapStateToProps(state) {
  return {
    language: state.main.language
  }
}

export default connect(mapStateToProps)(InputMobilePrefix);
